<template>
	<view class="content">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText">{{$t('back')}}</block>
			<block slot="content"><text class="text-black text-bold">{{i18n.title}}</text></block>
		</cu-custom>
		<view class="padding">
			<text>{{i18n.tips}}</text>
		</view>
		<view class="cu-list menu">
			<view @click="ItemClick(index)" v-for="(item,index) in leaveTypeList" :key="index" class="cu-item bg-white arrow margin-bottom">
				<view class="action title-width">
					<text class="cuIcon-title" :class="index%3 == 0 ? 'text-orange'
					:(index%3 == 1?'text-blue'
					:(index%3 == 2?'text-red'
					:(index%3 == 3?'text-green'
					:'text-yellow')))">
					</text>
					<text class="text-black text-bold">{{item.vname}}</text>
				</view>
				<view class="action response border-left text-sm">
					{{item.desc}}
				</view>
			</view>
		</view>
		<no-more :show="!leaveTypeList.length>0" :text="i18n.noTypes"></no-more>
	</view>
</template>

<script>
	export default {
		computed: {
			i18n() {
				return this.$t('leaveType')
			},
		},
		data() {
			return {
				leaveTypeList: [],
				index: -1
			}
		},
		onLoad() {
			this.$constant.checkUserInfo()
			this.InitData()
		},
		methods: {
			ItemClick(index){
				let typeList = this.leaveTypeList
				// this.index = index
				uni.navigateTo({
					url:'leave?types='+JSON.stringify(typeList)+'&index='+index
				})
			},
			
			InitData() {
				uni.showLoading({
					title: this.$t('loadding')
				})
				console.log(getApp().globalData.unitno)
				uni.request({
					url: this.$constant.BASEURL + this.$constant.GET_LEAVE_TYPE,
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						unitno: getApp().globalData.unitno
					},
					success: (res) => {
						if (res.data.code == 0) {
							// console.log(res.data.data)
							this.leaveTypeList = res.data.data
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							})
						}
					},
					complete() {
						uni.hideLoading()
					}
				});
			}
		}
	}
</script>

<style>
	.title-width {
		min-width: 160upx;
	}

	.border-left {
		display: flex;
		align-items: center;
		border-left: 1upx solid #dbdbdb;
		padding: 0upx 30upx;
		height: 60upx;
	}
</style>
